<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model 结合复选按钮使用</title>
</head>
<body>
<div id="app">
    <div>
        <p>用户协议</p>
        <input type="checkbox" name="isAgree" id="isAgree" v-model="isAgree" value="同意"><label
            for="isAgree">同意该协议</label>
        <h2>用户选中状态：{{ isAgree }}</h2>
    </div>

    <hr>
    <div>
        <h2>请选中你的爱好</h2>
        <input type="checkbox" name="hobbies" id="basketball" v-model="hobbies" value="篮球"><label
            for="basketball">篮球</label>
        <input type="checkbox" name="hobbies" id="football" v-model="hobbies" value="足球"><label
            for="football">足球</label>
        <input type="checkbox" name="hobbies" id="pingpang" v-model="hobbies" value="乒乓球"><label
            for="pingpang">乒乓球</label>
        <input type="checkbox" name="hobbies" id="badminton" v-model="hobbies" value="羽毛球"><label
            for="badminton">羽毛球</label>
        <h2>您选中的爱好：{{hobbies }}</h2>

    </div>

</div>
<script type="module">
    import {createApp, ref} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            let isAgree = ref(null)
            let hobbies = ref([])
            return {
                isAgree,
                hobbies
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>